<template>
  <div id="groups-join-conditions">
    <div class="flex">
      <div class="sub-label info text-right">已添加项</div>
      <div class="m-l-16">
        <el-tag
          v-for="option in addedItems"
          :key="option"
          closable
          disable-transitions
          @close="removeCondition(option)"
        >{{ option }}</el-tag>
        <el-input
          v-model="value"
          placeholder="按回车键添加所需信息"
          @keyup.enter.native="addCondition(value)"
        />
      </div>
    </div>
    <div class="flex">
      <div class="sub-label info text-right">常用选项</div>
      <div class="m-l-16">
        <el-tag
          v-for="option in commonOptions"
          :key="option"
          type="info"
          @click="addCondition(option)"
          v-text="option"
        />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'JoinConditions',
  props: {
    addedItems: { // 已添加项
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      value: '', // 想添加的
      commonOptions: ['姓名', '学号'],
    };
  },
  methods: {
    // 添加选项
    addCondition(option) {
      const value = option.trim();
      if (value && !this.addedItems.includes(value)) {
        this.addedItems.push(option);
        this.value = '';
      }
    },
    // 移除项
    removeCondition(option) { this.addedItems.splice(this.addedItems.indexOf(option), 1); },
  },
};
</script>

<style></style>
